<template>
  <div class="tablePaganations">
    <!-- 表格 -->
    <a-table
      :data-source="props.tableData.data"
      :pagination="false"
      :columns="columns"
      :row-selection="props.isSelect ? rowSelection1 : null"
      :scroll="{ x: props.tableData.width, y: props.tableData.height }"
    >
      <template v-slot:[item]="scope" v-for="item in renderArr">
        <slot :name="item" :scope="scope"></slot>
      </template>
    </a-table>
    <!-- 分页器 -->
    <div class="paginationSetting">
      <div class="paginationSettingtext">
        <span> 共 {{ total }} 条记录 </span>
        <span style="margin-left: 20px">
          第 {{ pageCurrent }} / {{ total == 0 ? 1 : Math.ceil(total / pageSize) }} 页
        </span>
      </div>
      <div class="paginations">
        <a-pagination
          :current="pageCurrent"
          :page-size-options="['5', '10', '20', '30', '40']"
          :total="total"
          show-size-changer
          show-quick-jumper
          :page-size="pageSize"
          @change="pageChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span>{{ props.tableData.data.length }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, useSlots, watch } from 'vue'
interface TableData {
  data: any
  total: number
  height: number
  width: number
}

interface Props {
  //* 数据
  tableData: any
  //* 数据格式
  columns: any[]
  //* 是否需要表格前面的选择按钮
  isSelect?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  tableData: { data: [], total: 1, height: 400, width: 800 },
  columns: () => [],
  isSelect: false
})

let total = ref(0) //多少条数据
let pageCurrent = ref(1) //当前第几页
let pageSize = ref(10) //每页多少行

const slots = useSlots()
const renderArr = Object.keys(slots)

const emit = defineEmits(['batch', 'changePage']) //子传父

const pageChange = (current, pagesize) => {
  //分页器改变事件
  pageCurrent.value = current
  if (pageSize.value != pagesize) {
    //如果每页行数改变，页码改为1
    pageCurrent.value = 1
  }
  pageSize.value = pagesize
  emit('changePage', { pageCurrent: pageCurrent.value, pageSize: pageSize.value })
}

// 是否多选
const rowSelection1 = {
  onChange: (selectedRowKeys, selectedRows) => {
    emit('batch', selectedRowKeys)
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    name: record.name
  })
}

// let tableH = ref(useTableHeight())
</script>

<style scoped lang="scss">
.tablePaganations {
  width: 100%;
  /* margin-top: 20px; */
}
.paginationSetting {
  display: flex;
  justify-content: space-between;
  height: 35px;
  margin-top: 20px;
}
.paginationSettingtext {
  margin-left: 20px;
}
.paginationSettingtext span {
  color: gray;
  line-height: 35px;
}
.paginations {
  margin-right: 20px;
}
</style>
